<template>
  <div>
    <div class="todo-item">
      <div class="todo-left" @click="todoComplete">
        <img v-if="item.task_status === '待办'" class="icon-20" src="@/static/icon/radio/20px_todo_unchecked.png" @click="todoComplete" alt=""/>
        <img v-else class="icon-20" src="@/static/icon/radio/20px_todo_checked.png" alt=""/>
      </div>
      <div class="todo-content" @click="todoContent">
        <div class="todo-content-left paragraph-p2-light">
          {{ item.task_description }}
        </div>
      </div>
      <div class="todo-right" @click="todoContent">
        <div class="todo-author">{{ item.create_person }}</div>
        <div class="todo-date">{{ item.created_at }}</div>
      </div>
    </div>

    <van-action-sheet
        v-model="ifShowAct"
        cancel-text="取消"
        close-on-click-action
    >
      <div class="actionItem body-light" @click="toEditTodo">
        <img src="@/static/images/todo/edit-2.png" alt=""/>
        编辑
      </div>
      <field-divider></field-divider>
      <div class="actionItem body-light" @click="delTodo">
        <img src="@/static/images/todo/24px_trash.png" alt=""/>
        删除
      </div>
    </van-action-sheet>
    <van-action-sheet v-model="ifShowEdit">
      <todo-textarea ref="todoTextareaEditRef" :title="'编辑'"
                     :value="actDesc"
                     v-on:todoSureConfirmEvent = "editTodo"
                     v-on:todoTextareaLeftEvent = "ifShowEdit = false"
      ></todo-textarea>
    </van-action-sheet>
    <van-overlay :show="ifShowInfo" z-index="1000">
      <todo-info :todoInfo="todoInfo" :key = "key.todoInfo" v-on:todoDetailCancelEvent="ifShowInfo =false"></todo-info>
    </van-overlay>
  </div>
</template>

<script>

import {ActionSheet, Overlay, Dialog, Toast} from "vant";
import TodoInfo from '@/components/todo/info'
import TodoTextarea from '@/components/todo/textarea'
import FieldDivider from '@/components/Field/Divider'
import {deleteTask, editTask, viewTaskDetail} from "@/request/api";

export default {
  name: "TodoItem",
  components: {
    [ActionSheet.name]: ActionSheet,
    [Overlay.name]: Overlay,
    TodoInfo,
    TodoTextarea,
    FieldDivider,
  },
  props: {
    item: { type: Object, default: () => ({
        id: Number,
        task_description: String,
        create_person: String,
        created_at: String,
        task_status: String
      })
    },
    listItemCode: {type: Number, default: () => (this.GLOBAL.listItemType.todo.waiting)},
  },
  data() {
    return {
      todoId: this.item.id,
      todoChecked: false,
      ifShowAct: false,
      ifShowEdit: false,
      ifShowInfo: false,
      radioItemList: [
        {title: '', value: '1'},
      ],
      key: {
        todoInfo: new Date().getTime()
      },
      actDesc: '',
      todoInfo: {
        title: '',
        createUser: '',
        createUserImage: '',
        createTime: '',
        updateUser: '',
        updateTime: '',
        updateUserImage: '',
      },
    }
  },
  mounted() {},
  methods: {
    todoComplete() {
      if (this.item.task_status === '待办') {
        this.todoChecked = true
        this.item.task_status = '已完成'
        this.$emit("todoItemCompleteEvent", this.todoId)
      }
    },
    todoContent() {
      if (this.listItemCode === this.GLOBAL.listItemType.todo.waiting) {
        this.ifShowAct = true
      }
      if (this.listItemCode === this.GLOBAL.listItemType.todo.done) {
        this.$loading.show()
        viewTaskDetail({ pathParam: this.todoId }).then(res => {
          const {State, Data} = res
          if (State) {
            const { task_description, created_at, create_user, create_user_image, finish_user_id, updated_at, finish_user_image } = Data
            this.todoInfo.title = task_description
            this.todoInfo.createTime = created_at
            this.todoInfo.createUser = create_user
            this.todoInfo.createUserImage = create_user_image
            this.todoInfo.updateTime = updated_at
            this.todoInfo.updateUser = finish_user_id
            this.todoInfo.updateUserImage = finish_user_image
            this.key.todoInf = new Date().getTime()
            this.ifShowInfo = true
          }
          this.$loading.close()
        }).catch( err => { console.log(err); this.$loading.close() })
      }
    },
    toEditTodo() {
      this.actDesc = this.item.task_description
      this.ifShowEdit = true
      this.ifShowAct = false
    },
    editTodo(value) {
      this.$loading.show()
      editTask({ pathParam: this.todoId, task_description: value}).then(res => {
        const { State } = res
        if (State) {
          this.ifShowEdit = false
          this.ifShowAct = false
          this.$emit("todoItemRefreshEvent")
          this.$router.push(this.GLOBAL.pathSetting.todo.main)
        }
        this.$loading.close()
      }).catch(() => {this.$loading.close()})
    },
    delTodo() {
      this.ifShowAct = false
      Dialog.confirm({
        title: '删除',
        message: '是否确定删除此待办事项？',
        className: 'paragraph-p1-light',
        confirmButtonText: '删除',
        cancelButtonText: '取消',
      }).then(() => {
        this.$loading.show()
        deleteTask({ pathParam: this.todoId}).then(res => {
          const { State } = res
          if (State) {
            this.$emit("todoItemRefreshEvent")
          } else {
            Toast('删除失败')
          }
          this.$loading.close()
        }).catch(() => {this.$loading.close()})
      })
    },
  },
}
</script>

<style scoped>

.todo-item {
  padding: 16px 0;
  border-bottom: 1px solid #ececec;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.todo-left {
  display: inline-block;
  width: 20px;
}
.todo-content {
  display: inline-block;
  padding-left: 8px;
  width: 185px;

}

.todo-right {
  display: inline-block;
  padding-left: 8px;
  width: 120px;
  text-align: right;
}

.todo-author {
  height: 24px;
  color: #737373;
}
.todo-date {
  height: 24px;
  color: #737373;
}

.actionItem {
  height: 56px;
  width: 343px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.actionItem > img {
  width: 24px;
  height: 24px;
}
</style>